<template>
	<view class="page">
		<!-- 优惠券类型切换 -->
		<view class="coupon-tabs">
			<view 
				class="tab-item" 
				:class="{'active': currentTab === 'all'}"
				@click="switchTab('all')"
			>
				<text>全部</text>
			</view>
			<view 
				class="tab-item" 
				:class="{'active': currentTab === 'new'}"
				@click="switchTab('new')"
			>
				<text>新人专享</text>
			</view>
			<view 
				class="tab-item" 
				:class="{'active': currentTab === 'member'}"
				@click="switchTab('member')"
			>
				<text>会员专享</text>
			</view>
		</view>
		
		<!-- 优惠券列表 -->
		<scroll-view 
			scroll-y 
			class="coupon-scroll"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="coupon-list">
				<view 
					class="coupon-item" 
					v-for="(item, index) in filteredCouponList" 
					:key="index"
				>
					<view class="coupon-left">
						<view class="amount">
							<text class="currency">¥</text>
							<text class="value">{{item.amount}}</text>
						</view>
						<text class="condition">满{{item.condition}}元可用</text>
						<text class="countdown" v-if="!item.received">剩余{{item.countdown}}</text>
					</view>
					<view class="coupon-right">
						<view class="info">
							<view class="name-row">
								<text class="name">{{item.name}}</text>
								<text class="tag" :class="item.type">{{item.typeText}}</text>
							</view>
							<text class="time">有效期至：{{item.expireTime}}</text>
							<text class="scope">适用范围：{{item.scope}}</text>
						</view>
						<view class="action">
							<view class="rules" @click="showRules(item)">
								<text>使用规则</text>
								<text class="arrow">></text>
							</view>
							<button 
								class="get-btn" 
								:class="{'disabled': item.received}"
								@click="receiveCoupon(item)"
							>
								{{item.received ? '已领取' : '立即领取'}}
							</button>
							<button 
								class="share-btn" 
								v-if="!item.received"
								@click="shareCoupon(item)"
							>
								分享
							</button>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredCouponList.length === 0">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无优惠券</text>
			</view>
		</scroll-view>
		
		<!-- 使用规则弹窗 -->
		<uni-popup ref="rulesPopup" type="center">
			<view class="rules-popup">
				<view class="rules-title">使用规则</view>
				<scroll-view scroll-y class="rules-content">
					<view class="rules-item" v-for="(rule, index) in currentRules" :key="index">
						<text class="rule-text">{{rule}}</text>
					</view>
				</scroll-view>
				<view class="rules-footer">
					<button class="close-btn" @click="closeRules">关闭</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref, computed} from 'vue';
	import {onLoad,onShow,onUnload} from "@dcloudio/uni-app";
	import request from "/common/api.js"
	
	// 当前选中的标签
	const currentTab = ref('all')
	
	// 优惠券列表
	const couponList = ref([])
	
	// 是否还有更多数据
	const hasMore = ref(true)
	
	// 是否正在刷新
	const isRefreshing = ref(false)
	
	// 规则弹窗引用
	const rulesPopup = ref(null)
	
	// 当前显示的规则
	const currentRules = ref([])
	
	// 定时器
	let timer = null
	
	// 根据当前标签筛选优惠券
	const filteredCouponList = computed(() => {
		if (currentTab.value === 'all') {
			return couponList.value
		}
		return couponList.value.filter(item => item.type === currentTab.value)
	})
	
	// 切换标签
	const switchTab = (tab) => {
		currentTab.value = tab
	}
	
	// 加载优惠券列表
	const loadCouponList = () => {
		// 模拟数据
		couponList.value = [
			{
				id: 1,
				name: '新人专享券',
				amount: '10',
				condition: '100',
				expireTime: '2024-12-31',
				received: false,
				type: 'new',
				typeText: '新人专享',
				scope: '全场通用',
				countdown: '23:59:59',
				rules: [
					'1. 仅限新用户领取',
					'2. 每个用户限领1张',
					'3. 不可与其他优惠券叠加使用',
					'4. 部分商品不可用'
				]
			},
			{
				id: 2,
				name: '满减优惠券',
				amount: '50',
				condition: '300',
				expireTime: '2024-12-31',
				received: false,
				type: 'all',
				typeText: '通用',
				scope: '全场通用',
				countdown: '47:59:59',
				rules: [
					'1. 全场通用',
					'2. 每个用户限领2张',
					'3. 可与会员优惠叠加',
					'4. 特价商品不可用'
				]
			},
			{
				id: 3,
				name: '节日特惠券',
				amount: '100',
				condition: '500',
				expireTime: '2024-12-31',
				received: false,
				type: 'all',
				typeText: '通用',
				scope: '限时商品',
				countdown: '71:59:59',
				rules: [
					'1. 仅限节日商品使用',
					'2. 每个用户限领1张',
					'3. 不可与其他优惠券叠加',
					'4. 限时商品专享'
				]
			},
			{
				id: 4,
				name: '会员专享券',
				amount: '200',
				condition: '1000',
				expireTime: '2024-12-31',
				received: true,
				type: 'member',
				typeText: '会员专享',
				scope: '全场通用',
				countdown: '95:59:59',
				rules: [
					'1. 仅限会员领取',
					'2. 每个会员限领1张',
					'3. 可与会员折扣叠加',
					'4. 全场商品可用'
				]
			}
		]
		
		// 启动倒计时
		startCountdown()
	}
	
	// 启动倒计时
	const startCountdown = () => {
		if (timer) {
			clearInterval(timer)
		}
		
		timer = setInterval(() => {
			couponList.value.forEach(coupon => {
				if (!coupon.received) {
					const [hours, minutes, seconds] = coupon.countdown.split(':').map(Number)
					let totalSeconds = hours * 3600 + minutes * 60 + seconds - 1
					
					if (totalSeconds <= 0) {
						coupon.received = true
						return
					}
					
					const newHours = Math.floor(totalSeconds / 3600)
					totalSeconds %= 3600
					const newMinutes = Math.floor(totalSeconds / 60)
					totalSeconds %= 60
					
					coupon.countdown = `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}:${String(totalSeconds).padStart(2, '0')}`
				}
			})
		}, 1000)
	}
	
	// 加载更多
	const loadMore = () => {
		if (!hasMore.value) return
		
		// 这里可以添加加载更多优惠券的接口调用
		setTimeout(() => {
			hasMore.value = false
		}, 1000)
	}
	
	// 下拉刷新
	const onRefresh = () => {
		isRefreshing.value = true
		// 重置列表并重新加载
		couponList.value = []
		hasMore.value = true
		
		setTimeout(() => {
			isRefreshing.value = false
			loadCouponList()
		}, 1000)
	}
	
	// 领取优惠券
	const receiveCoupon = (coupon) => {
		if (coupon.received) return
		
		uni.showLoading({
			title: '领取中...'
		})
		
		// 模拟领取过程
		setTimeout(() => {
			uni.hideLoading()
			// 模拟90%的概率领取成功
			if (Math.random() > 0.1) {
				uni.showToast({
					title: '领取成功',
					icon: 'success'
				})
				// 更新优惠券状态
				coupon.received = true
			} else {
				uni.showToast({
					title: '领取失败，请稍后重试',
					icon: 'none'
				})
			}
		}, 1000)
	}
	
	// 显示使用规则
	const showRules = (coupon) => {
		currentRules.value = coupon.rules
		rulesPopup.value.open()
	}
	
	// 关闭规则弹窗
	const closeRules = () => {
		rulesPopup.value.close()
	}
	
	// 分享优惠券
	const shareCoupon = (coupon) => {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	}

	onShow(() => {
		loadCouponList()
	})

    onLoad(()=>{
        loadCouponList()
    })
    
    onUnload(() => {
    	if (timer) {
    		clearInterval(timer)
    	}
    })
</script>

<style>
	.page {
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	/* 优惠券类型切换样式 */
	.coupon-tabs {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #D02B29;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #D02B29;
		border-radius: 2rpx;
	}
	
	/* 优惠券列表样式 */
	.coupon-scroll {
		height: calc(100vh - 100rpx);
	}
	
	.coupon-list {
		padding: 20rpx;
	}
	
	.coupon-item {
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}
	
	.coupon-left {
		width: 240rpx;
		background-color: #D02B29;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.amount {
		display: flex;
		align-items: baseline;
	}
	
	.currency {
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
	.value {
		font-size: 60rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	.condition {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 10rpx;
	}
	
	.countdown {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}
	
	.coupon-right {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.info {
		flex: 1;
	}
	
	.name-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 10rpx;
	}
	
	.tag {
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}
	
	.tag.new {
		background-color: #FFF0F0;
		color: #D02B29;
	}
	
	.tag.member {
		background-color: #FFF7E6;
		color: #FF9900;
	}
	
	.time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.scope {
		font-size: 24rpx;
		color: #666;
		display: block;
	}
	
	.action {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.rules {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}
	
	.arrow {
		margin-left: 4rpx;
		color: #999;
	}
	
	.get-btn {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #D02B29;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 30rpx;
		margin: 0 10rpx;
	}
	
	.get-btn.disabled {
		background-color: #CCCCCC;
	}
	
	.share-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #FFFFFF;
		color: #D02B29;
		font-size: 24rpx;
		border-radius: 30rpx;
		border: 1rpx solid #D02B29;
	}
	
	/* 加载更多样式 */
	.loading-more, .no-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
	
	/* 空状态样式 */
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}
	
	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
		display: block;
	}
	
	/* 规则弹窗样式 */
	.rules-popup {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: 600rpx;
		padding: 30rpx;
	}
	
	.rules-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.rules-content {
		max-height: 600rpx;
		margin-bottom: 30rpx;
	}
	
	.rules-item {
		margin-bottom: 20rpx;
	}
	
	.rule-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.rules-footer {
		text-align: center;
	}
	
	.close-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #D02B29;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
</style>
